<!DOCTYPE html>

































































<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico" />
<title>Targeting Screens from Web Apps | Android Developers</title>
<link href="../../assets/android-developer-docs-devguide.css" rel="stylesheet" type="text/css" />
<script src="../../assets/search_autocomplete.js" type="text/javascript"></script>
<script src="../../assets/jquery-resizable.min.js" type="text/javascript"></script>
<script src="../../assets/android-developer-docs.js" type="text/javascript"></script>
<script src="../../assets/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
  setToRoot("../../");
</script>
<noscript>
  <style type="text/css">
    html,body{overflow:auto;}
    #body-content{position:relative; top:0;}
    #doc-content{overflow:visible;border-left:3px solid #666;}
    #side-nav{padding:0;}
    #side-nav .toggle-list ul {display:block;}
    #resize-packages-nav{border-bottom:3px solid #666;}
  </style>
</noscript>
</head>
<body class="gc-documentation">

  <div id="header">
      <div id="headerLeft">
          <a href="../../index.html" tabindex="-1"><img
              src="../../assets/images/bg_logo.png" alt="Android Developers" /></a>
          <ul id="header-tabs" class="guide">
    
	<li id="home-link"><a href="../../offline.html">
	
		<span class="en">Home</span>
		<span style="display:none" class="de">Startseite</span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ホーム</span>
		<span style="display:none" class="zh-CN">主页</span>
		<span style="display:none" class="zh-TW">首頁</span>
	
	</a></li>
	<li id="sdk-link"><a href="../../sdk/index.html">
		<span class="en">SDK</span>
	</a></li>
	<li id="guide-link"><a href="../../guide/index.html" onClick="return loadLast('guide')">
	
		<span class="en">Dev Guide</span>
		<span style="display:none" class="de">Handbuch</span>
		<span style="display:none" class="es">Guía</span>
		<span style="display:none" class="fr">Guide</span>
		<span style="display:none" class="it">Guida</span>
		<span style="display:none" class="ja">開発ガイド</span>
		<span style="display:none" class="zh-CN">开发人员指南</span>
		<span style="display:none" class="zh-TW">開發指南</span>
	
	</a></li>
	<li id="reference-link"><a href="../../reference/packages.html" onClick="return loadLast('reference')">
	
		<span class="en">Reference</span>
		<span style="display:none" class="de">Referenz</span>
		<span style="display:none" class="es">Referencia</span>
		<span style="display:none" class="fr">Référence</span>
		<span style="display:none" class="it">Riferimento</span>
		<span style="display:none" class="ja">リファレンス</span>
		<span style="display:none" class="zh-CN">参考</span>
		<span style="display:none" class="zh-TW">參考資料</span>
	
	</a></li>
	<li id="resources-link"><a href="../../resources/index.html" onClick="return loadLast('resources')">
	
		<span class="en">Resources</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
    		<span style="display:none" class="ja"></span>
		<span style="display:none" class="zh-CN"></span>
		<span style="display:none" class="zh-TW"></span>
	
	</a></li>
	<li id="videos-link"><a href="../../videos/index.html" onClick="return loadLast('videos')">
	
		<span class="en">Videos</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ビデオ</span>
		<span style="display:none" class="zh-CN"></span>
		<span style="display:none" class="zh-TW"></span>
	
	</a></li>
	<li><a href="http://android-developers.blogspot.com" onClick="return requestAppendHL(this.href)">
	
		<span class="en">Blog</span>
		<span style="display:none" class="de"></span>
		<span style="display:none" class="es"></span>
		<span style="display:none" class="fr"></span>
		<span style="display:none" class="it"></span>
		<span style="display:none" class="ja">ブログ</span>
		<span style="display:none" class="zh-CN">博客</span>
		<span style="display:none" class="zh-TW">網誌</span>
	
	</a></li>


     
</ul>
     
      </div>
      <div id="headerRight">
          <div id="headerLinks">
          
          <a href="http://www.android.com">Android.com</a>
          </div>
  <div id="search" >
      <div id="searchForm">
          <form accept-charset="utf-8" class="gsc-search-box" 
                onsubmit="return submit_search()">
            <table class="gsc-search-box" cellpadding="0" cellspacing="0"><tbody>
                <tr>
                  <td class="gsc-input">
                    <input id="search_autocomplete" class="gsc-input" type="text" size="33" autocomplete="off"
                      title="search developer docs" name="q"
                      value="search developer docs"
                      onFocus="search_focus_changed(this, true)"
                      onBlur="search_focus_changed(this, false)"
                      onkeydown="return search_changed(event, true, '../../')"
                      onkeyup="return search_changed(event, false, '../../')" />
                  <div id="search_filtered_div" class="no-display">
                      <table id="search_filtered" cellspacing=0>
                      </table>
                  </div>
                  </td>
                  <td class="gsc-search-button">
                    <input type="submit" value="Search" title="search" id="search-button" class="gsc-search-button" />
                  </td>
                  <td class="gsc-clear-button">
                    <div title="clear results" class="gsc-clear-button">&nbsp;</div>
                  </td>
                </tr></tbody>
              </table>
          </form>
      </div><!-- searchForm -->
  </div><!-- search -->
      </div><!-- headerRight -->
      <script type="text/javascript">
        <!--  
        changeTabLang(getLangPref());
        //-->
      </script>
  </div><!-- header -->

  <div class="g-section g-tpl-240" id="body-content">
    <div class="g-unit g-first" id="side-nav">
      <div id="devdoc-nav">
<ul>

  <li>
    <h2><span class="en">Android Basics</span>
        <span class="de" style="display:none">Einführung in Android</span>
        <span class="es" style="display:none">Información básica sobre Android</span>
        <span class="fr" style="display:none">Présentation d'Android</span>
        <span class="it" style="display:none">Nozioni di base su Android</span>
        <span class="ja" style="display:none">Android の基本</span>
        <span class="zh-CN" style="display:none">Android 基础知识</span>
        <span class="zh-TW" style="display:none">Android 簡介</span>
    </h2>
    <ul>
      <li><a href="../../guide/basics/what-is-android.html">
        <span class="en">What Is Android?</span>
        <span class="de" style="display:none">Was ist Android?</span>
        <span class="es" style="display:none">¿Qué es Android?</span>
        <span class="fr" style="display:none">Qu'est-ce qu'Android&nbsp;?</span>
        <span class="it" style="display:none">Che cos'è Android?</span>
        <span class="ja" style="display:none">Android とは</span>
        <span class="zh-CN" style="display:none">Android 是什么？</span>
        <span class="zh-TW" style="display:none">什麼是 Android？</span>
          </a></li>
      <li><a href="../../guide/topics/fundamentals.html">
        <span class="en">Application Fundamentals</span>
        <span class="de" style="display:none">Anwendungsgrundlagen</span>
        <span class="es" style="display:none">Fundamentos de las aplicaciones</span>
        <span class="fr" style="display:none">Principes de base des applications</span>
        <span class="it" style="display:none">Concetti fondamentali sulle applicazioni</span>
        <span class="ja" style="display:none">開発の基礎</span>
        <span class="zh-CN" style="display:none">应用程序基础</span>
        <span class="zh-TW" style="display:none">應用程式基本原理</span>
      </a></li>

  <!--  <li><a style="color:gray;">The Android SDK</a></li> -->
  <!--  <li><a style="color:gray;">Walkthrough for Developers</a></li> -->
      <!-- quick overview of what it's like to develop on Android -->
    </ul>
  </li>

  <li>
    <h2>
      <span class="en">Framework Topics</span>
      <span class="de" style="display:none">Framework-Themen</span>
      <span class="es" style="display:none">Temas sobre el framework</span>
      <span class="fr" style="display:none">Thèmes relatifs au framework</span>
      <span class="it" style="display:none">Argomenti relativi al framework</span>
      <span class="ja" style="display:none">フレームワーク トピック</span>
      <span class="zh-CN" style="display:none">框架主题</span>
      <span class="zh-TW" style="display:none">架構主題</span>
    </h2>
    <ul>
      <li class="toggle-list">
        <div><a href="../../guide/topics/fundamentals/activities.html">
          <span class="en">Activities</span>
        </a></div>
        <ul>
          <li><a href="../../guide/topics/fundamentals/fragments.html">
            <span class="en">Fragments</span>
          </a></li>
          <li><a href="../../guide/topics/fundamentals/loaders.html">
            <span class="en">Loaders</span>
          </a></li>
          <li><a href="../../guide/topics/fundamentals/tasks-and-back-stack.html">
            <span class="en">Tasks and Back Stack</span></a></li>
        </ul>
      </li>
      <li class="toggle-list">
        <div><a href="../../guide/topics/fundamentals/services.html">
          <span class="en">Services</span>
        </a></div>
        <ul>
          <li><a href="../../guide/topics/fundamentals/bound-services.html">
            <span class="en">Bound Services</span>
          </a></li>
        </ul>
      </li>
      <li><a href="../../guide/topics/providers/content-providers.html">
            <span class="en">Content Providers</span>
          </a></li>
      <li><a href="../../guide/topics/intents/intents-filters.html">
            <span class="en">Intents and Intent Filters</span>
          </a></li>
      <li><a href="../../guide/topics/fundamentals/processes-and-threads.html">
            <span class="en">Processes and Threads</span>
          </a></li>
    </ul>


    <ul>
      <li class="toggle-list">
        <div><a href="../../guide/topics/ui/index.html">
            <span class="en">User Interface</span>
          </a></div>
        <ul>
          <li><a href="../../guide/topics/ui/declaring-layout.html">
               <span class="en">XML Layouts</span>
              </a></li>
          <li><a href="../../guide/topics/ui/ui-events.html">
                <span class="en">Input Events</span>
              </a></li>
          <li><a href="../../guide/topics/ui/menus.html">
               <span class="en">Menus</span>
              </a></li>
          <li><a href="../../guide/topics/ui/actionbar.html">
               <span class="en">Action Bar</span>
              </a></li>
          <li><a href="../../guide/topics/ui/dialogs.html">
                <span class="en">Dialogs</span>
              </a></li>
          <li class="toggle-list">
            <div><a href="../../guide/topics/ui/notifiers/index.html">
                <span class="en">Notifications</span>
            </a></div>
            <ul>
              <li><a href="../../guide/topics/ui/notifiers/toasts.html">
                <span class="en">Toast Notifications</span>
              </a></li>
              <li><a href="../../guide/topics/ui/notifiers/notifications.html">
                <span class="en">Status Bar Notifications</span>
              </a></li>
            </ul>
          </li>
          <li><a href="../../guide/topics/ui/drag-drop.html">
                <span class="en">Drag and Drop</span>
              </a></li>
          <li><a href="../../guide/topics/ui/themes.html">
                <span class="en">Styles and Themes</span>
              </a></li>
          <li><a href="../../guide/topics/ui/custom-components.html">
                <span class="en">Custom Components</span>
              </a></li>
          <li><a href="../../guide/topics/ui/binding.html">
                <span class="en">Binding to Data with AdapterView</span>
              </a></li>
          <li><a href="../../guide/topics/ui/layout-objects.html">
                <span class="en">Common Layout Objects</span>
              </a></li>
          <li><a href="../../guide/topics/ui/how-android-draws.html">
                <span class="en">How Android Draws Views</span>
              </a></li>
        </ul>
      </li><!-- end of User Interface -->

      <li class="toggle-list">
        <div><a href="../../guide/topics/resources/index.html">
               <span class="en">Application Resources</span>
             </a></div>
        <ul>
          <li><a href="../../guide/topics/resources/providing-resources.html">
                <span class="en">Providing Resources</span>
              </a></li>
          <li><a href="../../guide/topics/resources/accessing-resources.html">
                <span class="en">Accessing Resources</span>
              </a></li>
          <li><a href="../../guide/topics/resources/runtime-changes.html">
                <span class="en">Handling Runtime Changes</span>
              </a></li>
          <li><a href="../../guide/topics/resources/localization.html">
                <span class="en">Localization</span>
              </a></li>
          <li class="toggle-list">
            <div><a href="../../guide/topics/resources/available-resources.html">
              <span class="en">Resource Types</span>
            </a></div>
            <ul>
              <li><a href="../../guide/topics/resources/animation-resource.html">Animation</a></li>
              <li><a href="../../guide/topics/resources/color-list-resource.html">Color State List</a></li>
              <li><a href="../../guide/topics/resources/drawable-resource.html">Drawable</a></li>
              <li><a href="../../guide/topics/resources/layout-resource.html">Layout</a></li>
              <li><a href="../../guide/topics/resources/menu-resource.html">Menu</a></li>
              <li><a href="../../guide/topics/resources/string-resource.html">String</a></li>
              <li><a href="../../guide/topics/resources/style-resource.html">Style</a></li>
              <li><a href="../../guide/topics/resources/more-resources.html">More Types</a></li>
            </ul>
          </li><!-- end of resource types -->
        </ul>
      </li><!-- end of app resources -->
      <li class="toggle-list">
        <div><a href="../../guide/topics/data/data-storage.html">
            <span class="en">Data Storage</span>
          </a></div>
          <ul>
            <li><a href="../../guide/topics/data/backup.html">
                <span class="en">Data Backup</span>
              </a>
            </li>
          </ul>
      </li>
      <li><a href="../../guide/topics/security/security.html">
            <span class="en">Security and Permissions</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../guide/topics/manifest/manifest-intro.html">
          <span class="en">The AndroidManifest.xml File</span>
        </a></div>
        <ul>
          <li><a href="../../guide/topics/manifest/action-element.html">&lt;action&gt;</a></li>
          <li><a href="../../guide/topics/manifest/activity-element.html">&lt;activity&gt;</a></li>
          <li><a href="../../guide/topics/manifest/activity-alias-element.html">&lt;activity-alias&gt;</a></li>
          <li><a href="../../guide/topics/manifest/application-element.html">&lt;application&gt;</a></li>
          <li><a href="../../guide/topics/manifest/category-element.html">&lt;category&gt;</a></li>
          <li><a href="../../guide/topics/manifest/compatible-screens-element.html">&lt;compatible-screens&gt;</a></li>
          <li><a href="../../guide/topics/manifest/data-element.html">&lt;data&gt;</a></li>
          <li><a href="../../guide/topics/manifest/grant-uri-permission-element.html">&lt;grant-uri-permission&gt;</a></li>
          <li><a href="../../guide/topics/manifest/instrumentation-element.html">&lt;instrumentation&gt;</a></li>
          <li><a href="../../guide/topics/manifest/intent-filter-element.html">&lt;intent-filter&gt;</a></li>
          <li><a href="../../guide/topics/manifest/manifest-element.html">&lt;manifest&gt;</a></li>
          <li><a href="../../guide/topics/manifest/meta-data-element.html">&lt;meta-data&gt;</a></li>
          <li><a href="../../guide/topics/manifest/path-permission-element.html">&lt;path-permission&gt;</a></li>
          <li><a href="../../guide/topics/manifest/permission-element.html">&lt;permission&gt;</a></li>
          <li><a href="../../guide/topics/manifest/permission-group-element.html">&lt;permission-group&gt;</a></li>
          <li><a href="../../guide/topics/manifest/permission-tree-element.html">&lt;permission-tree&gt;</a></li>
          <li><a href="../../guide/topics/manifest/provider-element.html">&lt;provider&gt;</a></li>
          <li><a href="../../guide/topics/manifest/receiver-element.html">&lt;receiver&gt;</a></li>
          <li><a href="../../guide/topics/manifest/service-element.html">&lt;service&gt;</a></li>
          <li><a href="../../guide/topics/manifest/supports-gl-texture-element.html">&lt;supports-gl-texture&gt;</a></li>
          <li><a href="../../guide/topics/manifest/supports-screens-element.html">&lt;supports-screens&gt;</a></li><!-- ##api level 4## -->
          <li><a href="../../guide/topics/manifest/uses-configuration-element.html">&lt;uses-configuration&gt;</a></li>
          <li><a href="../../guide/topics/manifest/uses-feature-element.html">&lt;uses-feature&gt;</a></li> <!-- ##api level 4## -->
          <li><a href="../../guide/topics/manifest/uses-library-element.html">&lt;uses-library&gt;</a></li>
          <li><a href="../../guide/topics/manifest/uses-permission-element.html">&lt;uses-permission&gt;</a></li>
          <li><a href="../../guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt;</a></li>
        </ul>
      </li><!-- end of the manifest file -->
    </ul>

    <ul>
    <li class="toggle-list">
        <div><a href="../../guide/topics/graphics/index.html">
            <span class="en">Graphics</span>
          </a><span class="new-child">new!</span></div>
        <ul>
          <li><a href="../../guide/topics/graphics/2d-graphics.html">
              <span class="en">Canvas and Drawables</span></a></li>
          <li><a href="../../guide/topics/graphics/hardware-accel.html">
              <span class="en">Hardware Acceleration</span></a>
            <span class="new">new!</span></li>
          <li><a href="../../guide/topics/graphics/opengl.html">
              <span class="en">OpenGL</span>
            </a><span class="new">updated</span></li>
        </ul>
      </li>
      <li class="toggle-list">
        <div><a href="../../guide/topics/graphics/animation.html">
            <span class="en">Animation</span>
          </a></div>
        <ul>
          <li><a href="../../guide/topics/graphics/prop-animation.html">
              <span class="en">Property Animation</span></a></li>
          <li><a href="../../guide/topics/graphics/view-animation.html">
              <span class="en">View Animation</span></a></li>
          <li><a href="../../guide/topics/graphics/drawable-animation.html">
              <span class="en">Drawable Animation</span></a></li>
        </ul>
      </li>
      <li class="toggle-list">
	        <div><a href="../../guide/topics/renderscript/index.html">
	            <span class="en">RenderScript</span>
	          </a></div>
	        <ul>
	          <li><a href="../../guide/topics/renderscript/graphics.html">
	                <span class="en">Graphics</span>
	              </a>
	          </li>
	          <li><a href="../../guide/topics/renderscript/compute.html">
	                <span class="en">Compute</span>
	              </a>
	          </li>
	        </ul>
  	  </li>

      <li class="toggle-list">
          <div><a href="../../guide/topics/media/index.html">
            <span class="en">Multimedia and Camera</span>
          </a><span class="new">updated</span></div>
          <ul>
            <li><a href="../../guide/topics/media/mediaplayer.html">
                  <span class="en">Media Playback</span></a>
                </li>
            <li><a href="../../guide/topics/media/jetplayer.html">
                  <span class="en">JetPlayer</span></a>
                </li>
            <li><a href="../../guide/topics/media/camera.html">
                  <span class="en">Camera</span></a>
                  <span class="new">new!</span>
                </li>
            <li><a href="../../guide/topics/media/audio-capture.html">
                  <span class="en">Audio Capture</span></a>
                </li>
          </ul>
      </li>
      <li>
        <a href="../../guide/topics/clipboard/copy-paste.html">
            <span class="en">Copy and Paste</span>
        </a></li>
  <!--<li class="toggle-list">
        <div><a style="color:gray;">Sensors</a></div>
          <ul>
            <li><a style="color:gray;">Camera</a></li>
            <li><a style="color:gray;">Compass</a></li>
            <li><a style="color:gray;">Accelerometer</a></li>
          </ul>
      </li> -->
      <li class="toggle-list">
        <div><a href="../../guide/topics/location/index.html">
               <span class="en">Location and Maps</span>
             </a></div>
        <ul>
          <li><a href="../../guide/topics/location/obtaining-user-location.html">
                <span class="en">Obtaining User Location</span>
              </a></li>
        </ul>
      </li>
  <!--<li class="toggle-list">
        <div><a style="color:gray;">Wireless Controls</a></div>
          <ul>
            <li><a style="color:gray;">Wi-Fi</a></li>
          </ul>
      </li> -->
  <!--<li><a style="color:gray;">Localization</a></li>  -->
      <li><a href="../../guide/topics/appwidgets/index.html">
            <span class="en">App Widgets</span></a>
          </li>
      <li><a href="../../guide/topics/wireless/bluetooth.html">
            <span class="en">Bluetooth</span></a>
          </li>
      <li><a href="../../guide/topics/nfc/index.html">
            <span class="en">Near Field Communication</span>
          </a></li>
      <li class="toggle-list">
          <div><a href="../../guide/topics/usb/index.html">
            <span class="en">USB</span></a>
          </div>
            <ul>
              <li><a href="../../guide/topics/usb/accessory.html">Accessory</a></li>
              <li><a href="../../guide/topics/usb/host.html">Host</a></li>
              <li><a href="../../guide/topics/usb/adk.html">Open Accessory Dev Kit</a></li>
            </ul>
          </li>

       <li><a href="../../guide/topics/network/sip.html">
            <span class="en">Session Initiation Protocol</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../guide/topics/search/index.html">
            <span class="en">Search</span>
          </a></div>
          <ul>
            <li><a href="../../guide/topics/search/search-dialog.html">Creating a Search Interface</a></li>
            <li><a href="../../guide/topics/search/adding-recent-query-suggestions.html">Adding Recent Query Suggestions</a></li>
            <li><a href="../../guide/topics/search/adding-custom-suggestions.html">Adding Custom Suggestions</a></li>
            <li><a href="../../guide/topics/search/searchable-config.html">Searchable Configuration</a></li>
          </ul>
      </li>
      <li><a href="../../guide/topics/admin/device-admin.html">
            <span class="en">Device Administration</span></a>
      </li>
      <li class="toggle-list">
           <div>
                <a href="../../guide/topics/testing/index.html">
                   <span class="en">Testing</span>
               </a>
           </div>
           <ul>
              <li>
                <a href="../../guide/topics/testing/testing_android.html">
                <span class="en">Testing Fundamentals</span></a>
              </li>
              <li>
                <a href="../../guide/topics/testing/activity_testing.html">
                <span class="en">Activity Testing</span></a>
              </li>
              <li>
                <a href="../../guide/topics/testing/contentprovider_testing.html">
                <span class="en">Content Provider Testing</span></a>
              </li>
              <li>
                <a href="../../guide/topics/testing/service_testing.html">
                <span class="en">Service Testing</span></a>
              </li>
              <li>
                <a href="../../guide/topics/testing/what_to_test.html">
                <span class="en">What To Test</span></a>
              </li>
           </ul>
      </li>
    </ul>
  </li>

  <li>
    <h2>
      <span class="en">Android Market Topics</span>
    </h2>
    <ul>
      <li><a href="../../guide/publishing/licensing.html">
          <span class="en">Application Licensing</span></a>
      </li>
      <li class="toggle-list">
        <div><a href="../../guide/market/billing/index.html">
            <span class="en">In-app Billing</span></a>
        </div>
        <ul>
          <li><a href="../../guide/market/billing/billing_overview.html">
              <span class="en">In-app Billing Overview</span></a>
          </li>
          <li><a href="../../guide/market/billing/billing_integrate.html">
              <span class="en">Implementing In-app Billing</span></a>
          </li>
          <li><a href="../../guide/market/billing/billing_best_practices.html">
              <span class="en">Security and Design</span></a>
          </li>
          <li><a href="../../guide/market/billing/billing_testing.html">
              <span class="en">Testing In-app Billing</span></a>
          </li>
          <li><a href="../../guide/market/billing/billing_admin.html">
              <span class="en">Administering In-app Billing</span></a>
          </li>
          <li><a href="../../guide/market/billing/billing_reference.html">
              <span class="en">In-app Billing Reference</span></a>
          </li>
        </ul>
      </li>
      <li><a href="../../guide/appendix/market-filters.html">
          <span class="en">Market Filters</span></a>
      </li>
      <li><a href="../../guide/market/publishing/multiple-apks.html">
          <span class="en">Multiple APK Support</span></a>
      </li>
    </ul>
  </li>


  <li>
    <h2><span class="en">Developing</span>
               <span class="de" style="display:none">Entwicklung</span>
               <span class="es" style="display:none">Desarrollo</span>
               <span class="fr" style="display:none">Développement</span>
               <span class="it" style="display:none">Sviluppo</span>
               <span class="ja" style="display:none">開発</span>
               <span class="zh-CN" style="display:none">开发</span>
               <span class="zh-TW" style="display:none">開發</span>
    </h2>
    <ul>
  <!--<li><a href="">Developing for Android</a></li>
      signing, upgrading, selecting a package name, select device profile, touch, trackball, dpad available, etc. -->
      <li>
        <a href="../../guide/developing/index.html">
        <span class="en">Introduction</span></a>
      </li>

      <li class="toggle-list">
        <div>
           <a href="../../guide/developing/devices/index.html">
                <span class="en">Managing Virtual Devices</span>
            </a>
        </div>
        <ul>
          <li>
            <a href="../../guide/developing/devices/managing-avds.html">
              <span class="en">With AVD Manager</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/devices/managing-avds-cmdline.html">
              <span class="en">From the Command Line</span>
            </a>
          </li>
          <li>
           <a href="../../guide/developing/devices/emulator.html">
                <span class="en">Using the Android Emulator</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="../../guide/developing/device.html">
          <span class="en">Using Hardware Devices</span>
        </a>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../guide/developing/projects/index.html">
            <span class="en">Managing Projects</span>
          </a>
        </div>
        <ul>
          <li>
            <a href="../../guide/developing/projects/projects-eclipse.html">
              <span class="en">From Eclipse with ADT</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/projects/projects-cmdline.html">
                <span class="en">From the Command Line</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../guide/developing/building/index.html">
            <span class="en">Building and Running</span>
          </a>
        </div>
        <ul>
          <li><a href="../../guide/developing/building/building-eclipse.html">
            <span class="en">From Eclipse with ADT</span>
          </a></li>
          <li><a href="../../guide/developing/building/building-cmdline.html">
            <span class="en">From the Command Line</span></a></li>
        </ul>
      </li>

      <li class="toggle-list">
        <div>
          <a href="../../guide/developing/debugging/index.html">
            <span class="en">Debugging</span>
          </a>
        </div>
        <ul>
          <li>
            <a href="../../guide/developing/debugging/debugging-projects.html">
                <span class="en">From Eclipse with ADT</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/debugging-projects-cmdline.html">
                <span class="en">From Other IDEs</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/ddms.html">
              <span class="en">Using DDMS</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/debugging-log.html">
                <span class="en">Reading and Writing Logs</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/debugging-ui.html">
                <span class="en">Debugging and Profiling UIs</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/debugging-tracing.html">
                <span class="en">Profiling with Traceview and dmtracedump</span>
            </a>
          </li>
          <li>
            <a href="../../guide/developing/debugging/debugging-devtools.html">
                <span class="en">Using the Dev Tools App</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="toggle-list">
           <div>
                <a href="../../guide/developing/testing/index.html">
                   <span class="en">Testing</span>
               </a>
           </div>
           <ul>
              <li>
                <a href="../../guide/developing/testing/testing_eclipse.html">
                  <span class="en">From Eclipse with ADT</span>
                </a>
              </li>

              <li>
                <a href="../../guide/developing/testing/testing_otheride.html">
                  <span class="en">From Other IDEs</span>
                </a>
              </li>
           </ul>
         </li>

         <li class="toggle-list">
        <div><a href="../../guide/developing/tools/index.html">
            <span class="en">Tools</span>
          </a></div>
        <ul>
          <li><a href="../../guide/developing/tools/adb.html">adb</a></li>
          <li><a href="../../guide/developing/tools/adt.html">ADT</a></li>
          <li><a href="../../guide/developing/tools/android.html">android</a></li>
          <li><a href="../../guide/developing/tools/bmgr.html">bmgr</a>
          <li><a href="../../guide/developing/tools/dmtracedump.html">dmtracedump</a></li>
          <li><a href="../../guide/developing/tools/draw9patch.html">Draw
          9-Patch</a></li>
          <li><a href="../../guide/developing/tools/emulator.html">Emulator</a></li>
          <li><a href="../../guide/developing/tools/etc1tool.html">etc1tool</a></li>
          <li><a href="../../guide/developing/tools/hierarchy-viewer.html">Hierarchy Viewer</a></li>
          <li><a href="../../guide/developing/tools/hprof-conv.html">hprof-conv</a></li>
          <li><a href="../../guide/developing/tools/layoutopt.html">layoutopt</a></li>
          <li><a href="../../guide/developing/tools/logcat.html">logcat</a></li>
          <li><a href="../../guide/developing/tools/mksdcard.html">mksdcard</a></li>
          <li><a href="../../guide/developing/tools/monkey.html">Monkey</a></li>
          <li class="toggle-list">
            <div><a href="../../guide/developing/tools/monkeyrunner_concepts.html">
              <span class="en">monkeyrunner</span>
            </a></div>
            <ul>
              <li><a href="../../guide/developing/tools/MonkeyDevice.html">
                <span class="en">MonkeyDevice</span>
                </a></li>
              <li><a href="../../guide/developing/tools/MonkeyImage.html">
                <span class="en">MonkeyImage</span>
                </a></li>
              <li><a href="../../guide/developing/tools/MonkeyRunner.html">
                <span class="en">MonkeyRunner</span>
                </a></li>
            </ul>
          </li>
          <li><a href="../../guide/developing/tools/proguard.html">ProGuard</a></li>
          <li><a href="../../guide/developing/tools/adb.html#sqlite">sqlite3</a></li>
          <li><a href="../../guide/developing/tools/traceview.html">Traceview</a></li>
          <li><a href="../../guide/developing/tools/zipalign.html">zipalign</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Publishing</span>
        <span class="de" style="display:none">Veröffentlichung</span>
        <span class="es" style="display:none">Publicación</span>
        <span class="fr" style="display:none">Publication</span>
        <span class="it" style="display:none">Pubblicazione</span>
        <span class="ja" style="display:none">公開</span>
        <span class="zh-CN" style="display:none">发布</span>
        <span class="zh-TW" style="display:none">發佈</span>
    </h2>
    <ul>
      <li><a href="../../guide/publishing/app-signing.html">
            <span class="en">Signing Your Applications</span>
            <span class="de" style="display:none">Signieren Ihrer Anwendungen</span>
            <span class="es" style="display:none">Firma de aplicaciones</span>
            <span class="fr" style="display:none">Attribution de votre signature <br />à vos applications</span>
            <span class="it" style="display:none">Firma delle applicazioni</span>
            <span class="ja" style="display:none">アプリケーションへの署名</span>
            <span class="zh-CN" style="display:none">应用程序签名</span>
            <span class="zh-TW" style="display:none">簽署應用程式</span>
          </a></li>
      <li><a href="../../guide/publishing/versioning.html">
            <span class="en">Versioning Your Applications</span>
            <span class="de" style="display:none">Versionsverwaltung für Ihre <br />Anwendungen</span>
            <span class="es" style="display:none">Versiones de las aplicaciones</span>
            <span class="fr" style="display:none">Attribution d'une version à vos applications</span>
            <span class="it" style="display:none">Controllo versioni delle applicazioni</span>
            <span class="ja" style="display:none">アプリケーションのバージョニング</span>
            <span class="zh-CN" style="display:none">应用程序版本控制</span>
            <span class="zh-TW" style="display:none">應用程式版本設定</span>
          </a></li>
      <li><a href="../../guide/publishing/preparing.html">
            <span class="en">Preparing to Publish</span>
            <span class="de" style="display:none">Vorbereitung auf die Veröffentlichung</span>
            <span class="es" style="display:none">Publicación de aplicaciones</span>
            <span class="fr" style="display:none">Préparation à la publication</span>
            <span class="it" style="display:none">Preparativi per la pubblicazione</span>
            <span class="ja" style="display:none">公開の準備</span>
            <span class="zh-CN" style="display:none">准备发布</span>
            <span class="zh-TW" style="display:none">準備發佈</span>
          </a></li>
      <li><a href="../../guide/publishing/publishing.html">
            <span class="en">Publishing on Android Market</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Best Practices</span>
               <span class="de" style="display:none">Bewährte Verfahren</span>
               <span class="es" style="display:none">Prácticas recomendadas</span>
               <span class="fr" style="display:none">Meilleures pratiques</span>
               <span class="it" style="display:none">Best practice</span>
               <span class="ja" style="display:none">ベスト プラクティス</span>
               <span class="zh-CN" style="display:none">最佳实践</span>
               <span class="zh-TW" style="display:none">最佳實務</span>
    </h2>
    <ul>
      <li><a href="../../guide/practices/compatibility.html">
            <span class="en">Compatibility</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../guide/practices/screens_support.html">
          <span class="en">Supporting Multiple Screens</span>
        </a></div>
        <ul>
          <li><a href="../../guide/practices/screens-distribution.html">
            <span class="en">Distributing to Specific Screens</span>
          </a></li>
          <li><a href="../../guide/practices/screen-compat-mode.html">
            <span class="en">Screen Compatibility Mode</span>
          </a></li>
          <li><a href="../../guide/practices/screens-support-1.5.html">
            <span class="en">Strategies for Android 1.5</span>
          </a></li>
        </ul>
      </li>
      <li><a href="../../guide/practices/optimizing-for-3.0.html">
            <span class="en">Optimizing Apps for Android 3.0</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../guide/practices/ui_guidelines/index.html">
               <span class="en">UI Guidelines</span>
             </a></div>
        <ul>
          <li class="toggle-list">
            <div><a href="../../guide/practices/ui_guidelines/icon_design.html">
                   <span class="en">Icon Design <span class="new">updated</span></span>
                 </a></div>
            <ul>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_launcher.html">
                    <span class="en">Launcher Icons <span class="new">updated</span></span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_menu.html">
                    <span class="en">Menu Icons</span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_action_bar.html">
                    <span class="en">Action Bar Icons <span class="new">new!</span></span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_status_bar.html">
                    <span class="en">Status Bar Icons <span class="new">updated</span></span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_tab.html">
                    <span class="en">Tab Icons</span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_dialog.html">
                    <span class="en">Dialog Icons</span>
                  </a></li>
              <li><a href="../../guide/practices/ui_guidelines/icon_design_list.html">
                    <span class="en">List View Icons</span>
                  </a></li>
            </ul>
          </li>
          <li><a href="../../guide/practices/ui_guidelines/widget_design.html">
                <span class="en">App Widget Design <span class="new">updated</span></span>
              </a></li>
          <li><a href="../../guide/practices/ui_guidelines/activity_task_design.html">
                <span class="en">Activity and Task Design</span>
              </a></li>
          <li><a href="../../guide/practices/ui_guidelines/menu_design.html">
                <span class="en">Menu Design</span>
              </a></li>
        </ul>
      </li>
      </ul>
      <ul>
      <li><a href="../../guide/practices/design/accessibility.html">
            <span class="en">Designing for Accessibility</span>
          </a></li>
      <li class="toggle-list">
        <div><a href="../../guide/practices/design/performance.html">
            <span class="en">Designing for Performance</span>
          </a></div>
        <ul>
          <li><a href="../../guide/practices/design/jni.html">
                <span class="en">JNI Tips</span>
              </a></li>
        </ul>
      </li>
      <li><a href="../../guide/practices/design/responsiveness.html">
            <span class="en">Designing for Responsiveness</span>
          </a></li>
      <li><a href="../../guide/practices/design/seamlessness.html">
            <span class="en">Designing for Seamlessness</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Web Applications</span>
    </h2>
    <ul>
      <li><a href="../../guide/webapps/index.html">
            <span class="en">Web Apps Overview</span>
          </a></li>
      <li><a href="../../guide/webapps/targeting.html">
            <span class="en">Targeting Screens from Web Apps</span>
          </a></li>
      <li><a href="../../guide/webapps/webview.html">
            <span class="en">Building Web Apps in WebView</span>
          </a></li>
      <li><a href="../../guide/webapps/debugging.html">
            <span class="en">Debugging Web Apps</span>
          </a></li>
      <li><a href="../../guide/webapps/best-practices.html">
            <span class="en">Best Practices for Web Apps</span>
          </a></li>
    </ul>
  </li>

  <li>
    <h2><span class="en">Appendix</span>
               <span class="de" style="display:none">Anhang</span>
               <span class="es" style="display:none">Apéndice</span>
               <span class="fr" style="display:none">Annexes</span>
               <span class="it" style="display:none">Appendice</span>
               <span class="ja" style="display:none">付録</span>
               <span class="zh-CN" style="display:none">附录</span>
               <span class="zh-TW" style="display:none">附錄</span>
    </h2>
    <ul>
      <li><a href="../../guide/appendix/api-levels.html">
            <span class="en">Android API Levels</span>
          </a></li>
      <li><a href="../../guide/appendix/install-location.html">
            <span class="en">App Install Location</span>
          </a></li>
      <li><a href="../../guide/appendix/media-formats.html">
            <span class="en">Supported Media Formats <span class="new">updated</span></span>
          </a></li>
      <li><a href="../../guide/appendix/g-app-intents.html">
            <span class="en">Intents List: Google Apps</span>
          </a></li>
      <li><a href="../../guide/developing/tools/aidl.html">AIDL</a></li>
      <li><a href="../../guide/appendix/glossary.html">
            <span class="en">Glossary</span>
          </a></li>
    </ul>
  </li>

</ul>

<script type="text/javascript">
<!--
    buildToggleLists();
    changeNavLang(getLangPref());
//-->
</script>

      </div>
    </div> <!-- end side-nav -->
    <script>
      addLoadEvent(function() {
        scrollIntoView("devdoc-nav");
        });
    </script>




<div class="g-unit" id="doc-content"><a name="top"></a>

<div id="jd-header" class="guide-header">
  <span class="crumb">
    &nbsp;
    
  </span>
<h1>Targeting Screens from Web Apps</h1>
</div>

  <div id="jd-content">

    <div class="jd-descr">
    <div id="qv-wrapper">
<div id="qv">
<h2>Quickview</h2>
<ul>
  <li>You can target your web page for different screens using viewport metadata, CSS, and
JavaScript</li>
  <li>Techniques in this document work for Android 2.0 and greater, and for web pages rendered
in the default Android Browser and in a <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code></li>
</ul>

<h2>In this document</h2>
<ol>
<li><a href="#Metadata">Using Viewport Metadata</a>
  <ol>
    <li><a href="#ViewportSize">Defining the viewport size</a></li>
    <li><a href="#ViewportScale">Defining the viewport scale</a></li>
    <li><a href="#ViewportDensity">Defining the viewport target density</a></li>
  </ol>
</li>
<li><a href="#DensityCSS">Targeting Device Density with CSS</a></li>
<li><a href="#DensityJS">targeting Device Density with JavaScript</a></li>
</ol>

</div>
</div>


<p>If you're developing a web application for Android or redesigning one for mobile devices, you
should carefully consider how your web pages appear on different kinds of screens. Because
Android is available on devices with different types of screens, you should account for some factors
that affect the way your web pages appear on Android devices.</p>

<p class="note"><strong>Note:</strong> The features described in this document are supported
by the Android Browser application (provided with the default Android platform) and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> (the framework view widget for displaying web pages), on Android 2.0 and
greater. Third-party web browsers running on Android might not support these features for
controlling the viewport size and screen densities.</p>

<p>When targeting your web pages for Android devices, there are two fundamental factors that you
should account for:</p>

<dl>
  <dt>The size of the viewport and scale of the web page</dt>
    <dd>When the Android Browser loads a web page, the default behavior is to load the
page in "overview mode," which provides a zoomed-out perspective of the web page. You can override
this behavior for your web page by defining the default dimensions of the viewport or the initial
scale of the viewport. You can also control how much the user can zoom in and out of your web
page, if at all. The user can also disable overview mode in the
Browser settings, so you should never assume that your page will load in overview mode. You
should instead customize the viewport size and/or scale as appropriate for your page.</p>
    <p>However, when your page is rendered in a <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code>, the page loads at
full zoom (not in "overview mode"). That is, it appears at the default size for the page,
instead of zoomed out. (This is also how the page appears if the user disables overview
mode.)</p></dd>

  <dt>The device's screen density</dt>
    <dd>The screen density (the number of pixels per inch) on an Android-powered device affects
the resolution and size at which a web page is displayed. (There are three screen density
categories: low, medium, and high.) The Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code>
compensate for variations in the screen
density by scaling a web page so that all devices display the web page at the same perceivable size
as a medium-density screen. If graphics are an important element of your web design, you
should pay close attention to the scaling that occurs on different densities, because image scaling
can produce artifacts (blurring and pixelation).
      <p>To provide the best visual representation on all
screen densities, you should control how scaling occurs by providing viewport metadata about
your web page's target screen density and providing alternative graphics for different screen
densities, which you can apply to different screens using CSS or JavaScript.</p></dd>
</dl>

<p>The rest of this document describes how you can account for these effects and provide a good
design on multiple types of screens.</p>



<h2 id="Metadata">Using Viewport Metadata</h2>

<p>The viewport is the area in which your web page is drawn. Although the viewport's visible area
matches the size of the screen,
the viewport has its own dimensions that determine the number of pixels available to a web page.
That is, the number of pixels available to a web page before it exceeds the screen area is
defined by the dimensions of the viewport,
not the dimensions of the device screen. For example, although a device screen might have a width of
480 pixels, the viewport can have a width of 800 pixels, so that a web page designed to be 800
pixels wide is completely visible on the screen.</p>

<p>You can define properties of the viewport for your web page using the <code>"viewport"</code>
property in an HTML <code>&lt;meta&gt;</code> tag (which must
be placed in your document <code>&lt;head&gt;</code>). You can define multiple viewport properties in the
<code>&lt;meta&gt;</code> tag's <code>content</code> attribute. For example, you can define the height and
width of the viewport, the initial scale of the page, and the target screen density.
Each viewport property in the <code>content</code> attribute must be separated by a comma.</p>

<p>For example, the following snippet from an HTML document specifies that the viewport width
should exactly match the device screen width and that the ability to zoom should be disabled:</p>

<pre>
&lt;head&gt;
    &lt;title&gt;Example&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
&lt;/head&gt;
</pre>

<p>That's an example of just two viewport properties. The following syntax shows all of the
supported viewport properties and the general types of values accepted by each one:</p>

<pre>
&lt;meta name="viewport"
      content="
          <b>height</b> = [<em>pixel_value</em> | device-height] ,
          <b>width</b> = [<em>pixel_value</em> | device-width ] ,
          <b>initial-scale</b> = <em>float_value</em> ,
          <b>minimum-scale</b> = <em>float_value</em> ,
          <b>maximum-scale</b> = <em>float_value</em> ,
          <b>user-scalable</b> = [yes | no] ,
          <b>target-densitydpi</b> = [<em>dpi_value</em> | device-dpi |
                               high-dpi | medium-dpi | low-dpi]
          " /&gt;
</pre>

<p>The following sections discuss how to use each of these viewport properties and exactly what the
accepted values are.</p>

<div class="figure" style="width:300px">
  <img src="../../images/webapps/compare-default.png" alt="" height="300" />
  <p class="img-caption"><strong>Figure 1.</strong> A web page with an image that's 320 pixels
wide, in the Android Browser when there is no viewport metadata set (with "overview mode"
enabled, the viewport is 800 pixels wide, by default).</p>
</div>


<div class="figure" style="width:300px">
  <img src="../../images/webapps/compare-width400.png" alt="" height="300" />
  <p class="img-caption"><strong>Figure 2.</strong> A web page with viewport <code>width=400</code> and
"overview mode" enabled (the image in the web page is 320 pixels wide).</p>
</div>


<h3 id="ViewportSize">Defining the viewport size</h3>

<p>Viewport's <code>height</code> and <code>width</code> properties allow you to specify the size of the
viewport (the number of pixels available to the web page before it goes off screen).</p>

<p>As mentioned in the introduction above, the Android Browser loads pages in "overview mode" by
default (unless disable by the user), which sets the minimum viewport width to 800 pixels. So, if
your web page specifies its size to be 320 pixels wide, then your page appears smaller than the
visible screen (even if the physical screen is 320 pixels wide, because the viewport simulates a
drawable area that's 800 pixels wide), as shown in figure 1. To avoid this effect, you should
explicitly define the viewport <code>width</code> to match the width for which you have designed your web
page.</p>

<p>For example, if your web page is designed to be exactly 320 pixels wide, then you might
want to specify that size for the viewport width:</p>

<pre>
&lt;meta name="viewport" content="width=320" /&gt;
</pre>

<p>In this case, your web page exactly fits the screen width, because the web page width and
viewport width are the same.</p>

<p class="note"><strong>Note:</strong> Width values that are greater than 10,000 are ignored and
values less than (or equal to) 320 result in a value equal to the device-width (discussed below).
Height values that are greater then 10,000 or less than 200 are also ignored.</p>

<p>To demonstrate how this property affects the size of
your web page, figure 2 shows a web page that contains an image that's 320 pixels
wide, but with the viewport width set to 400.</p>


<p class="note"><strong>Note:</strong> If you set the viewport width to match your web page width
and the device's screen width does <em>not</em> match those dimensions, then the web page
still fits the screen even if the device has a high or low-density screen, because the
Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> scale web pages to match the perceived size on a
medium-density screen, by default (as you can see in figure 2, when comparing the hdpi device to the
mdpi device). Screen densities are discussed more in <a href="#ViewportDensity">Defining the
viewport target density</a>.</p>


<h4>Automatic sizing</h4>

<p>As an alternative to specifying the viewport dimensions with exact pixels, you can set the
viewport size to always match the dimensions of the device screen, by defining the
viewport properties <code>height</code>
and <code>width</code> with the values <code>device-height</code> and <code>device-width</code>, respectively. This
is appropriate when you're developing a web application that has a fluid width (not fixed width),
but you want it to appear as if it's fixed (to perfectly fit every screen as
if the web page width is set to match each screen). For example:</p>

<pre>
&lt;meta name="viewport" content="width=device-width" /&gt;
</pre>

<p>This results in the viewport width matching whatever the current screen width is, as shown in
figure 3. It's important to notice that, this results in images being scaled to fit the screen
when the current device does not match the <a href="#ViewportDensity">target
density</a>, which is medium-density if you don't specify otherwise. As a result, the image
displayed on the high-density device in figure 3 is scaled up in order to match the width
of a screen with a medium-density screen.</p>

<div class="figure" style="width:300px">
  <img src="../../images/webapps/compare-initialscale.png" alt="" height="300" />
  <p class="img-caption"><strong>Figure 3.</strong> A web page with viewport <code>width=device-width</code> <em>or</em> <code>initial-scale=1.0</code>.</p>
</div>

<p class="note"><strong>Note:</strong> If you instead want <code>device-width</code> and <code>device-height</code> to match the physical screen pixels for every device,
instead of scaling your web page to match the target density, then you must also include
the <code>target-densitydpi</code> property with a value of <code>device-dpi</code>. This is discussed more in
the section about <a href="#ViewportDensity">Defining the viewport density</a>. Otherwise, simply
using <code>device-height</code> and <code>device-width</code> to define the viewport size makes your web page
fit every device screen, but scaling occurs on your images in order to adjust for different screen
densities.</p>



<h3 id="ViewportScale">Defining the viewport scale</h3>

<p>The scale of the viewport defines the level of zoom applied to the web page. Viewport
properties allow you to specify the scale of your web page in the following ways:</p>
<dl>
  <dt><code>initial-scale</code></dt>
  <dd>The initial scale of the page. The value is a float that indicates a multiplier for your web
page size, relative to the screen size. For example, if you set the initial scale to "1.0" then the
web page is displayed to match the resolution of the <a href="#ViewportDensity">target
density</a> 1-to-1. If set to "2.0", then the page is enlarged (zoomed in) by a factor of 2.
    <p>The default initial scale is calculated to fit the web page in the viewport size.
Because the default viewport width is 800 pixels, if the device screen resolution is less than
800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the
800-pixel-wide page on the screen.</p></dd>

  <dt><code>minimum-scale</code></dt>
  <dd>The minimum scale to allow. The value is a float that indicates the minimum multiplier for
your web page size, relative to the screen size. For example, if you set this to "1.0", then the
page can't zoom out because the minimum size is 1-to-1 with the <a href="#ViewportDensity">target
density</a>.</dd>

  <dt><code>maximum-scale</code></dt>
  <dd>The maximum scale to allow for the page. The value is a float that indicates the
maximum multiplier for your web page size,
relative to the screen size. For example, if you set this to "2.0", then the page can't
zoom in more than 2 times the target size.</dd>

  <dt><code>user-scalable</code></dt>
  <dd>Whether the user can change the scale of the page at all (zoom in and out). Set to <code>yes</code>
to allow scaling and <code>no</code> to disallow scaling. The default is <code>yes</code>. If you set
this to <code>no</code>, then the <code>minimum-scale</code> and <code>maximum-scale</code> are ignored,
because scaling is not possible.</dd>
</dl>

<p>All scale values must be within the range 0.01&ndash;10.</p>

<p>For example:</p>

<pre>
&lt;meta name="viewport" content="initial-scale=1.0" /&gt;
</pre>

<p>This metadata sets the initial scale to be full sized, relative to the viewport's target
density.</p>




<h3 id="ViewportDensity">Defining the viewport target density</h3>

<p>The density of a device's screen is based on the screen resolution, as defined by the number of
dots per inch (dpi). There are three screen
density categories supported by Android: low (ldpi), medium (mdpi), and high (mdpi). A screen
with low density has fewer available pixels per inch, whereas a screen with high density has more
pixels per inch (compared to a medium density screen). The Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> target a medium density screen by default.</p>


<div class="figure" style="width:300px">
  <img src="../../images/webapps/compare-initialscale-devicedpi.png" alt="" height="300" />
  <p class="img-caption"><strong>Figure 4.</strong> A web page with viewport <code>width=device-width</code> and <code>target-densitydpi=device-dpi</code>.</p>
</div>


<p>Because the default target density is medium, when users have a device with a low or high density
screen, the Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> scale web pages (effectively zoom
the pages) so they display at a
size that matches the perceived appearance on a medium density screen. More specifically, the
Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> apply approximately 1.5x scaling to web pages
on a high density screen (because its screen pixels are smaller) and approximately 0.75x scaling to
pages on a low density screen (because its screen pixels are bigger).</p>

<p>Due to this default scaling, figures 1, 2, and 3 show the example web page at the same physical
size on both the high and medium density device (the high-density device shows the
web page with a default scale factor that is 1.5 times larger than the actual pixel resolution, to
match the target density). This can introduce some undesirable artifacts in your images.
For example, although an image appears the same size on a medium and high-density device, the image
on the high-density device appears more blurry, because the image is designed to be 320 pixels
wide, but is drawn with 480 pixels.</p>

<p>You can change the target screen density for your web page using the <code>target-densitydpi</code>
viewport property. It accepts the following values:</p>

<ul>
<li><code>device-dpi</code> - Use the device's native dpi as the target dpi. Default scaling never
occurs.</li>
<li><code>high-dpi</code> - Use hdpi as the target dpi. Medium and low density screens scale down
as appropriate.</li>
<li><code>medium-dpi</code> - Use mdpi as the target dpi. High density screens scale up and low
density screens scale down. This is the default target density.</li>
<li><code>low-dpi</code> - Use ldpi as the target dpi. Medium and high density screens scale up
as appropriate.</li>
<li><em><code>&lt;value&gt;</code></em> - Specify a dpi value to use as the target dpi. Values must
be within the range 70&ndash;400.</li>
</ul></p>

<p>For example, to prevent the Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> from scaling
your web page for different screen densities, set
the <code>target-densitydpi</code> viewport property to <code>device-dpi</code>. When you do, the page is
not scaled. Instead, the page is displayed at a size that matches the current screen's
density. In this case, you should also define the viewport width to match the device width, so your
web page naturally fits the screen size. For example:</p>

<pre>
&lt;meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /&gt;
</pre>

<p>Figure 4 shows a web page using these viewport settings&mdash;the high-density device
now displays the page smaller because its physical pixels are smaller than those on the
medium-density device, so no scaling occurs and the 320-pixel-wide image is drawn using exactly 320
pixels on both screens. (This is how you should define your viewport if
you want to customize your web page based on screen density and provide different image assets for
different densities, <a href="#DensityCSS">with CSS</a> or
<a href="#DensityJS">with JavaScript</a>.)</p>


<h2 id="DensityCSS">Targeting Device Density with CSS</h2>

<p>The Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> support a CSS media feature that allows
you to create styles for specific
screen densities&mdash;the <code>-webkit-device-pixel-ratio</code> CSS media feature. The
value you apply to this feature should be either
"0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density,
or high density screens, respectively.</p>

<p>For example, you can create separate stylesheets for each density:</p>

<pre>
&lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /&gt;
&lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /&gt;
&lt;link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /&gt;
</pre>


<div class="figure" style="width:300px">
  <img src="../../images/webapps/compare-width-devicedpi-css.png" alt="" height="300" />
  <p class="img-caption"><strong>Figure 5.</strong> A web page with CSS that's targetted to
specific screen densities using the <code>-webkit-device-pixel-ratio</code> media feature. Notice
that the hdpi device shows a different image that's applied in CSS.</p>
</div>

<p>Or, specify the different styles in one stylesheet:</p>

<pre class="no-pretty-print">
#header {
    background:url(medium-density-image.png);
}

&#64;media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

&#64;media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}
</pre>

<p class="note"><strong>Note:</strong> The default style for <code>#header</code> applies the image
designed for medium-density devices in order to support devices running a version of Android less
than 2.0, which do not support the <code>-webkit-device-pixel-ratio</code> media feature.</p>

<p>The types of styles you might want to adjust based on the screen density depend on how you've
defined your viewport properties. To provide fully-customized styles that tailor your web page for
each of the supported densities, you should set your viewport properties so the viewport width and
density match the device. That is:</p>

<pre>
&lt;meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /&gt;
</pre>

<p>This way, the Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> do not perform scaling on your
web page and the viewport width
matches the screen width exactly. On their own, these viewport properties create results shown in
figure 4. However, by adding some custom CSS using the <code>-webkit-device-pixel-ratio</code> media
feature, you can apply different styles. For example, figure 5 shows a web page with these viewport
properties and also some CSS added that applies a high-resolution image for high-density
screens.</p>



<h2 id="DensityJS">Targeting Device Density with JavaScript</h2>

<p>The Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code> support a DOM property that allows you to
query the density of the current
device&mdash;the <code>window.devicePixelRatio</code> DOM property. The value of this property
specifies the scaling factor used for the current device. For example, if the value
of <code>window.devicePixelRatio</code> is "1.0", then the device is considered a medium density
device and no scaling is applied by default; if the value is "1.5", then the device is
considered a high density device and the page is scaled 1.5x by default; if the value
is "0.75", then the device is considered a low density device and the page is scaled
0.75x by default. Of course, the scaling that the Android Browser and <code><a href="../../reference/android/webkit/WebView.html">WebView</a></code>
apply is based on the web page's
target density&mdash;as described in the section about <a href="#ViewportDensity">Defining the
viewport target density</a>, the default target is medium-density, but you can change the
target to affect how your web page is scaled for different screen densities.</p>

<p>For example, here's how you can query the device density with JavaScript:</p>

<pre>
if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}
</pre>








    </div>

  <a href="#top" style="float:right">&uarr; Go to top</a>
  
  </div>

<div id="footer">


  <div id="copyright">
    
  Except as noted, this content is licensed under <a
  href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</a>. 
  For details and restrictions, see the <a href="../../license.html">
  Content License</a>.
  </div>
  <div id="build_info">
    
  Android 4.0&nbsp;r1 - 17 Oct 2011 18:17

  </div>

  <div id="footerlinks">
    
  <p>
    <a href="http://www.android.com/terms.html">Site Terms of Service</a> -
    <a href="http://www.android.com/privacy.html">Privacy Policy</a> -
    <a href="http://www.android.com/branding.html">Brand Guidelines</a>
  </p>
  </div>

</div> <!-- end footer -->

</div><!-- end doc-content -->

</div> <!-- end body-content --> 

<script type="text/javascript">
init(); /* initialize android-developer-docs.js */
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>

</body>
</html>



